<template>
  <div>
    <el-date-picker v-if="item['date'] === true" :clearable="item['clearable']" v-model="scope.row[item.key]"
      :type="item['time'] ? 'datetime' : 'date'" :name="item.key" :ref="item.key" :placeholder="item['placeholder']"
      :disabled="item['disable'] == true" :value-format="item['time'] ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
      :picker-options="set_time(item['dateOptions'], scope?.row)" @change="item['change'] && item['change'](scope.row)"
      v-bind="items['attrs']">
    </el-date-picker>
    <el-select :default-first-option="true" style="width: 100% !important" :allow-create="item['allowCreate'] === true"
      :clearable="item['clearable'] == true" v-else-if="item['dicts'] !== undefined" v-model="scope.row[item.key]"
      :name="item.key" :ref="'dict' + item.key + scope.$index" :filterable="true" :remote-method="(words) =>
        item.query(words, (data) => {
          item['dicts'] = data;
        })
        " :remote="item['query'] ? true : false" :disabled="item['disable'] == true" :placeholder="item['placeholder']"
      @focus="handleDictFocus(item)" @change="
        item['change'] &&
        item['change'](
          scope.row,
          item['dicts'].filter((a) => a.value == scope.row[item.key])
        )
        " @clear="() => {
          item.query('', (data) => {
            item['dicts'] = data;
          });
        }
          " @blur="(a) => {
            item['blur'] ? item['blur'](a) : () => { };
          }
            ">
      <el-option v-for="li in item['dicts']" :key="li.value" :label="li.label" :value="li.value">
        <slot :name="item.key + '-dict'" :info="li">
          {{ li.label }}
        </slot>
      </el-option>
      <template #empty v-if="item['goAdd'] !== undefined">
        <div style="padding: 5px; text-align: center">
          <el-button type="text" @click="item['goAdd'](scope.row, item)">+ 去增加</el-button>
        </div>
      </template>
    </el-select>
    <el-checkbox-group v-model="scope.row[item.key]" :disabled="item['disable'] == true" :ref="item.key"
      v-else-if="item['checkbox'] !== undefined" @change="item['change'] && item['change'](scope.row)">
      <el-checkbox :name="item.key + checkbox" :label="checkbox" v-for="(checkbox, index) in item['checkbox']"
        :key="index">{{ item["labels"] ? item["labels"][index] : checkbox }}</el-checkbox>
    </el-checkbox-group>
    <el-radio-group :ref="item.key" v-model="scope.row[item.key]" :disabled="item['disable'] == true"
      v-else-if="item['radio'] !== undefined" @input="item['input'] && item['input'](scope.row)">
      <el-radio :label="radio" :name="item.key" v-for="(radio, index) in item['radio']" :key="index">{{ item["labels"] ?
        item["labels"][index] : radio }}</el-radio>
    </el-radio-group>
    <el-switch :name="item.key" :ref="item.key" v-model="scope.row[item.key]" :disabled="item['disable'] == true"
      v-else-if="item['switch'] !== undefined" :active-color="item.trueColor ? item.trueColor : '#13ce66'"
      :inactive-color="item.falseColor ? item.falseColor : '#ff4949'" :active-value="item['activeValue'] !== undefined ? item['activeValue'] : true
        " :inactive-value="item['inactiveValue'] !== undefined ? item['inactiveValue'] : false
          " :active-text="item['activeText']" :inactive-text="item['inactiveText']"
      :width="item.switchWidth ? item.switchWidth : undefined" @change="item['change'] && item['change'](scope.row)">
    </el-switch>
    <el-autocomplete v-else-if="item['autocomplete'] === true" :name="item.key" :ref="item.key"
      v-model="scope.row[item.key]" :fetch-suggestions="item['fetch_suggestions']"
      :trigger-on-focus="item['triggerOnFocus'] === true" :popper-append-to-body="item['popperAppendToBody'] === true"
      :popper-class="item['popperClass']" highlight-first-item :select-when-unmatched="true"
      :value-key="item['valueKey']" @select="(a) => {
        item['auto_select'] ? item['auto_select'](a, scope.row) : undefined;
      }
        " @input="(a) => {
          item['input'] ? item['input'](a, scope.row) : undefined;
        }
          " :disabled="item['disable'] == true" :placeholder="item['placeholder']">
      <slot :name="item.key + '-autocomplete'" :info="scope.item">
        {{ scope.item[[item["valueKey"]]] }}
      </slot>
    </el-autocomplete>
    <el-upload :style="'display:flex;' + getItemLabelWidth(item, itemWidth, labelWidth)"
      v-else-if="item['upload'] === true" :name="item.key" :ref="item.key" :action="item['action']"
      :headers="item['headers']" :data="item['data']" :auto-upload="item['autoUpload'] === undefined"
      :on-preview="item['preview']" :before-remove="item['beforeRemove']" :on-remove="item['remove']"
      :on-progress="item['progress']" :on-success="(response, file, fileList) =>
        item['success'](response, file, fileList, scope.row)
        " :on-exceed="item['exceed']" :list-type="item['listType']" :on-error="item['error']"
      :on-change="item['change']" :before-upload="item['beforeUpload']" :multiple="item['multiple'] === true"
      :limit="item['limit']" :file-list="item['fileList']" :placeholder="item['placeholder']"
      :show-file-list="item['showFileList']" :drag="item['drag'] === true" :accept="item['accept']"
      :http-request="(file) => item['httpRequest'](file, scope.row)" :disabled="item['disable'] == true">
      <template #trigger :style="item['style']">
        <slot :name="`${item.key}-upload`"><el-button type="primary">点击上传</el-button></slot>
      </template>
      <template #tip>
        <slot :name="`${item.key}-upload-tip`" :info="scope.row"></slot>
      </template>
    </el-upload>
    <el-input v-else-if="item['number'] === true" :clearable="item['clearable']" v-model="scope.row[item.key]"
      :placeholder="item['placeholder']" type="number" :disabled="item['disable'] == true" :name="item.key"
      :ref="item.key" @change="() => {
        scope.row[item.key] = parseFloat(scope.row[item.key]);
        item['change'] && item['change'](scope.row);
      }
        " @input="(val) => {
          if (val.length > 12) {
            scope.row[item.key] = val.toString().substring(0, val.length - 1);
            return;
          }
          item['input'] && item['input'](val, scope.row);
        }
          " @blur="item['blur'] && item['blur'](scope.row)">
      <template #prefix v-if="item['prefix']">
        <div v-html="item['prefix']"></div>
      </template>
      <template #suffix v-if="item['suffix']">
        <div v-html="item['suffix']" @click="item['click'] && item.click(scope.row)"></div>
      </template>
    </el-input>
    <el-input v-else-if="item['area'] === true" type="textarea" :name="item.key" :ref="item.key" :rows="3"
      show-word-limit :placeholder="item['placeholder']" :maxlength="item['max'] ? item['max'] : 100"
      v-model="scope.row[item.key]" :disabled="item['disable'] == true"
      @change="item['change'] && item['change'](scope.row)" @input="item['input'] && item['input'](scope.row)"
      @blur="item['blur'] && item['blur'](scope.row)">
    </el-input>
    <el-input v-else :name="item.key" :ref="item.key" :disabled="item['disable'] == true" :clearable="item['clearable']"
      v-model="scope.row[item.key]" :placeholder="item['placeholder']" :maxlength="item['max'] ? item['max'] : 20"
      :show-password="item['password']" @change="item['change'] && item['change'](scope.row)"
      @input="item['input'] && item['input'](scope.row)" @blur="item['blur'] && item['blur'](scope.row)">
      <template #prefix v-if="item['prefix']">
        <div v-html="item['prefix']"></div>
      </template>

      <template #suffix v-if="item['suffix']">
        <el-button type="text" v-if="item['suffix'] === true" @click="item['click'] && item.click(scope.row)"
          style="cursor: pointer" class="el-icon-more"></el-button>
        <div v-else v-html="item['suffix']" @click="item['click'] && item.click(scope.row)"></div>
      </template>
    </el-input>
  </div>
</template>

<script>
export default {
  props: ["item", "scope"],
  methods: {
    //select focus 事件
    handleDictFocus(items) {
      if (items["query"]) {
        items.query("", (data) => {
          this.$set(items, "dicts", data);
        });
      }
    },

    //时间快捷键
    set_time(get_dateOptions, model) {
      if (get_dateOptions) {
        let dateOptions = get_dateOptions(model);
        return dateOptions;
      } else {
        return {};
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>